import React, { useEffect, useState } from 'react';
import { Row, Col } from 'antd';
import { Input } from 'antd';
import { DatePicker, Space, Modal } from 'antd';
import { Select, TimePicker } from 'antd';
import { Button, Menu, Dropdown, Form, Radio } from 'antd';

const { RangePicker } = DatePicker;
import { Table } from 'antd';

const { Option } = Select;
import { history } from 'umi';
import { DownOutlined, UpOutlined } from '@ant-design/icons';

import { FormInstance } from 'antd/lib/form';
import { Transfer } from 'antd';
import request from '../../../http';

const xinzheng = (props: any) => {
  const formItemLayout = {
    labelCol: {
      // xs: { span: 24 },
      // sm: { span: 8 },
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 16 },
    },
  };

  //获取表单的数据传给父组件
  //数据传送父组件
  const [courseData, setCourseData]: any = useState({
    applyDateTime: null, //日期
    classRoom: null, //教室标识
    name: null, //课程名称
    outSign: null, //签退时间
    remarks: null, //备注
    responsibility: null, //责任教师id
    sign: null, //签到时间
    total: null,
    trainingTeachers: null, //实训老师id
  });
  //把数据装到data里面，然后返回回去
  //   let data: any = [courseData];
  //   props.callback(data);
  //   console.log("课程新增子组件传来的值",data);

  const [applyDateTime, setApplyDateTime] = React.useState([{}]); //时间
  const [name, setName] = React.useState([{}]); //项目名称
  const [trainingTeachers, setTrainingTeachers] = React.useState([{}]); //实训老师
  const [responsibility, setResponsibility] = React.useState([{}]); //责任老师
  const [sign, setSign] = React.useState([{}]); //签到时间
  const [outSign, setOutSign] = React.useState([{}]); //签退时间
  const [classRoom, setClassRoom] = React.useState([{}]); //教室
  const [remarks, setRemarks] = React.useState([{}]); //备注

  const [Zrls, setZrls] = React.useState([{}]);
  const [Sxls, setSxls] = React.useState([{}]);
  const [Xmmc, setXmmc] = React.useState([{}]);

  React.useEffect(() => {
    //12课程管理 责任老师下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryResponsibilityName').then(
      (result: any) => {
        console.log('课程管理，责任老师下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，责任老师下拉框地址result.data数据',
            result.data,
          );

          setZrls(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //13课程管理 实训老师下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryTrainingTeacherNames').then(
      (result: any) => {
        console.log('课程管理，实训老师下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，实训老师下拉框地址result.data数据',
            result.data,
          );

          setSxls(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
    //14课程管理 项目名称下拉框地址 缺请求参数
    request.post('/common/a_t_s/queryCourseName').then(
      (result: any) => {
        console.log('课程管理，项目名称下拉框地址result数据', result);
        if (result.success) {
          //获得成功响应返回的数据
          console.log(
            '课程管理，项目名称下拉框地址result.data数据',
            result.data,
          );
          setXmmc(result.data);
        }
      },
      (error) => {
        //错误返回错误信息
        console.log('请求错误');
      },
    );
  }, []);

  return (
    <div>
      <Form {...formItemLayout}>
        <div>
          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="applyDateTime" label="时间：">
              <DatePicker
                placeholder="请选择"
                onChange={(e: any) => {
                  console.log('我是e的值', e);
                  console.log(
                    "我是e.format('YYYY-MM-DD')",
                    e.format('YYYY-MM-DD'),
                  );
                  //console.log(e.target.value);
                  //setApplyDateTime(e.target.value);
                  setCourseData({
                    ...courseData,
                    applyDateTime: e.format('YYYY-MM-DD'),
                    //'applyDateTime': e['applyDateTime'].format('YYYY-MM-DD'),
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="name" label="项目名称：">
              <Select
                placeholder="请选择"
                allowClear
                onChange={(e: any) => {
                  //console.log(e.target.value);
                  //setName(e.target.value);
                  setCourseData({
                    ...courseData,
                    name: e,
                  });
                }}
              >
                {Xmmc.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="trainingTeachers" label="实训老师：">
              <Select
                showSearch
                className="Select"
                placeholder="请选择，多选"
                onChange={(e: any) => {
                  //console.log(e.target.value);
                  //setTrainingTeachers(e.target.value);
                  setCourseData({
                    ...courseData,
                    trainingTeachers: e,
                  });
                }}
              >
                {Sxls.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>
          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="responsibility" label="责任老师：">
              <Select
                showSearch
                className="Select"
                placeholder="请选择"
                onChange={(e: any) => {
                  console.log('责任老师e的值', e);
                  //console.log(e.target.value);
                  //setResponsibility(e.target.value);
                  setCourseData({
                    ...courseData,
                    responsibility: e,
                  });
                }}
              >
                {Zrls.map((cNameObj: any) => {
                  return (
                    <Option key={cNameObj.id} value={cNameObj.id}>
                      {cNameObj.format}
                    </Option>
                  );
                })}
              </Select>
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="sign" label="签到时间">
              <TimePicker
                onChange={(e: any) => {
                  console.log(e.format('HH:mm:ss'));
                  //setSign(e.target.value);
                  setCourseData({
                    ...courseData,
                    sign: e.format('HH:mm:ss'),
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '300px' }}>
            <Form.Item name="outSign" label="签退时间">
              <TimePicker
                onChange={(e: any) => {
                  console.log(e.format('HH:mm:ss'));
                  //setOutSign(e.target.value);
                  setCourseData({
                    ...courseData,
                    outSign: e.format('HH:mm:ss'),
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '1000px' }}>
            <Form.Item name="classRoom" label="教室：">
              <Input
                placeholder="请录入"
                onChange={(e: any) => {
                  console.log(e.target.value);
                  setClassRoom(e.target.value);
                  setCourseData({
                    ...courseData,
                    classRoom: e.currentTarget.value,
                  });
                }}
              />
            </Form.Item>
          </div>

          <div style={{ marginLeft: '0px', float: 'left', width: '1000px' }}>
            <Form.Item name={'remarks'} label="备注">
              <Input.TextArea
                placeholder="请录入"
                onChange={(e: any) => {
                  console.log(e.target.value);
                  setRemarks(e.target.value);
                  setCourseData({
                    ...courseData,
                    remarks: e.currentTarget.value,
                  });
                }}
              />
            </Form.Item>
          </div>
          <div style={{ clear: 'left', width: '1000px' }}></div>
        </div>
      </Form>
    </div>
  );
};

export default xinzheng;
